<template>
	<view class="mui-content memberCenterBox" id="content">
		<view class="memInfoBox_wrap">
			<view class="memInfoBox">
				<view class="headImg">
					<img class="headicon" src="../img/headImg.png" alt="" />
					<button class="mui-btn mui-btn-jh" id="vip">vip</button>
				</view>
				<view class="memberInfo">
					<p id="userName">未设置</p>
					<span>ID:<em id="userId">123</em></span>
					<a class="editbtn" href="memberInfo.html">修改资料 <img src="../img/right1.png" /></a>
				</view>
			</view>
		</view>
		<ul class="links_list">
			<li><a href="myCode.html"><img src="../img/fx.png" /> <span>分享好友</span> </a></li>
			<li><a href="billList.html"><img src="../img/bill.png" /> <span>我的奖金</span></a></li>
			<li><a href="moneyList.html"><img src="../img/bill.png" /> <span>提现记录</span></a></li>
			<li><a href="withdraw-deposit.html"><img src="../img/bill.png" /> <span>提现申请</span></a></li>
			<li><a href="myTeam.html"><img src="../img/wdtj.png" /> <span>我的推荐 <em>推荐代数:<i id="introduceNum"
								style="font-style:'normal'"></i></em></span> <i
						class="mui-icon mui-icon-arrowright"></i></a></li>
			<li><a href="site.html"><img src="../img/notice.png" /> <span>收货地址</span></a></li>
			<li id="addPay"><a href="addPay.html"><img src="../img/notice.png" /> <span>添加收款方式</span></a></li>
			<li><a href="myAccount.html"><img src="../img/notice.png" /><span>我的收款账户</span></a></li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	a{
		text-decoration: none;
	}
	.links_list li a em {
	    float: right;
	    font-size: 0.26rem;
	    font-style: normal;
	    color: #a08362;
	}
	.memberCenterBox.mui-content {
		background: url(../img/bg.png) no-repeat left top;
		background-size: 100%;
	}

	.memInfoBox_wrap {
		background: url(../img/slider_bg.png) no-repeat left bottom;
		background-size: 100%;
		padding-bottom: 20px;
		padding-top: 40px;
	}

	.links_list li {
		background: #211d1e;
		padding: 0 10px;
		border-bottom: 1px solid #3e3733;

	}

	li {
		list-style: none;
		margin: 0;
		width: 100%;
	}

	.links_list {
		margin: 0 auto;
		width: 112%;
		position: absolute;
		left: -12%;
	}

	.links_list li a {
		position: relative;
		align-items: center;
		justify-content: space-around;
		color: #c9a460;
		line-height: 45px;
		padding: 15px 0px;
		width: 100%;
	}
	.links_list li span {
		position: relative;
		left: 35px;
	}
	

	.links_list li a img {
		position: absolute;
		height: 24px;
		width: 24px;
		margin: 0;
		margin-right: 8px;
		top:15px
	}

	.links_list li a .mui-icon {
		color: #c9a460;
		font-size: 18px;
	}

	.mui-icon {
		font-family: Muiicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		display: inline-block;
		text-decoration: none;
		-webkit-font-smoothing: antialiased;
	}

	.memInfoBox {
		font-size: 12px;
		line-height: 20px;
		position: relative;
		margin-bottom: 7px;
		color: #fff;
		width: 92%;
		margin: 0 auto;
		border-radius: 8px;
		background: #2a2624;
		height: auto;
	}

	.memberCenterBox .headImg {
		padding: 5px 10px;
		border-bottom: 1px solid #3e3733;
		position: relative;
		height: 50px;
	}

	.memberCenterBox .headImg .headicon {
		position: absolute;
		top: -30px;
		left: 20px;
	}

	.memberCenterBox .headImg img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: inline-block;
	}

	.memberCenterBox .headImg .mui-btn-jh {
		padding: 0px 15px;
		border: 0;
		float: right;
		margin: 5px 0;
		font-size: 16px;
		border-radius: 0.7em;
		color: #2a2624;
		background: -moz-linear-gradient(left, #e6e686 0%, #d6ab5b 100%);
		background: -webkit-linear-gradient(left, #e6e686 0%, #d6ab5b 100%);
		background: -o-linear-gradient(left, #e6e686 0%, #d6ab5b 100%);
		background: -ms-linear-gradient(left, #e6e686 0%, #d6ab5b 100%);
		background: linear-gradient(to right, #e6e686 0%, #d6ab5b 100%);
		transition-duration: .2s;
		text-align: center;
		vertical-align: top;
		white-space: nowrap;
	}

	.memberCenterBox .memberInfo {
		padding: 15px;
		position: relative;
	}

	.memberCenterBox .memberInfo p {
		font-size: 16px;
		color: #c9a460;
		margin-bottom: 5px;
	}

	.memberCenterBox .memberInfo span {
		font-size: 14px;
		color: #75603f;
		display: block;
		margin-bottom: 5px;
	}

	.memberCenterBox .memberInfo .editbtn {
		position: absolute;
		right: 0;
		top: 50%;
		background: #433b32;
		font-size: 14px;
		color: #c9a460;
		border-radius: 20px 0 0 20px;
		display: flex;
		align-items: center;
		padding: 5px 10px;
		transform: translateY(-50%);
	}

	.memberCenterBox .memberInfo .editbtn img {
		height: 16px;
	}

	ul {
		display: block;
		list-style-type: disc;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 40px;
	}

	.links_list li {
		background: #211d1e;
		padding: 0 10px;
		/* border-bottom: solid 1px #f0f0f0; */
	}
	.links_list li a .mui-icon {
	    color: #c9a460;
	    font-size: 18px;
	}
	.mui-icon {
	    font-family: Muiicons;
	    font-size: 24px;
	    font-weight: normal;
	    font-style: normal;
	    line-height: 1;
	    display: inline-block;
	    text-decoration: none;
	    -webkit-font-smoothing: antialiased;
	}
</style>
